{% if items %}
  <nav class="flex flex-col bg-white items-center" role="navigation">
    <ul class="flex flex-row">
      {% if previous_url is not empty %}
        <li class="font-sans px-4 py-4  lg:p-2 lg:px-4 text-gray-light">
          <a class="text-md" href="{{ previous_url }}">{{ "Previous"|t }}</a>
        </li>
      {% endif %}
      {% for i, item in items %}
        <li class="font-sans px-4 py-4 lg:p-2 lg:px-4 text-black">
          <a class="text-md {% if (item.in_active_trail) %}is-active{% endif %}"
             href="{{ item.href }}">{{ i }}</a>
        </li>
      {% endfor %}
      <li class="font-sans px-4 py-4  lg:p-2 lg:px-4 text-black">
        <a class="text-md" href="{{ next_url }}">{{ "Next"|t }}</a>
      </li>
    </ul>
  </nav>
{% endif %}
